<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple">站点名称:</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" />{{ deviceGroup.name }}</el-col>
      <el-col :span="6"><div class="grid-content bg-purple">设备数量:</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" />{{ deviceGroup.deviceCount }}</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple">地址:</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" />{{ deviceGroup.address }}</el-col>
      <el-col :span="6"><div class="grid-content bg-purple">描述:</div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" />{{ deviceGroup.description }}</el-col>
    </el-row>
    <div>
      <el-table

        :data="devices"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="设备名称" min-width="80px">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备key" min-width="150px">
          <template slot-scope="{row}">
            <span>{{ row.key }}</span>
          </template>
        </el-table-column>

        <el-table-column label="Actions" align="center" width="400" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button size="mini" type="danger" @click="handleDelete(row,$index)">
              解除绑定
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="groupSearch.pageNum" :limit.sync="groupSearch.pageSize" @pagination="getDevices" />

    </div>
  </div>

</template>

<script>
import { updateDeviceGroup, unbinding, getUnbindingDevices, deviceInGroup, detail } from '@/api/device-group'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      devices: [],
      groupSearch: {
        groupId: undefined,
        pageSize: 10,
        pageNum: 1
      },
      deviceGroup: {},
      total: 0
    }
  },
  created() {
    var groupId = this.$route.params && this.$route.params.id
    this.groupSearch.groupId = groupId
    this.getGroupDetail(groupId)
    this.getDevices()
  },
  methods: {

    getGroupDetail(id) {
      detail(id).then(res => {
        this.deviceGroup = res.data
      })
    },
    getDevices() {
      deviceInGroup(this.groupSearch).then(response => {
        this.devices = response.data.list
        this.total = response.data.total
        console.log('123:' + response.data)
      })
    },

    handleDelete(row, index) {
      console.log('dqwe:' + row)
      unbinding(row.id).then(response => {
        this.getDevices()
      })
    }
  }
}
</script>

<style>

</style>
